<template>
  <div class="task-display">
    <div v-if="tasks && tasks.length > 0" class="task-list">
      <div
        v-for="task in tasks"
        :key="task.id"
        class="task-item"
        :class="`task-item--${task.status}`"
      >
        <div class="task-header">
          <span class="task-number">{{ task.sequence }}</span>
          <span class="task-title">{{ task.description }}</span>
          <el-tag :type="getStatusType(task.status)" size="small">
            {{ getStatusText(task.status) }}
          </el-tag>
        </div>
        <div class="task-meta">
          <span class="task-type">{{ task.type }}</span>
          <span class="task-time">预计 {{ task.estimatedTime }}s</span>
        </div>
      </div>
    </div>
    <div v-else class="no-tasks">
      <span>暂无任务信息</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Task } from '@/types'

interface Props {
  tasks?: Task[]
}

const props = defineProps<Props>()

const getStatusType = (status: string) => {
  switch (status) {
    case 'COMPLETED': return 'success'
    case 'FAILED': return 'danger'
    case 'IN_PROGRESS': return 'warning'
    default: return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'PENDING': return '待执行'
    case 'IN_PROGRESS': return '执行中'
    case 'COMPLETED': return '已完成'
    case 'FAILED': return '失败'
    case 'CANCELLED': return '已取消'
    default: return status
  }
}
</script>

<style lang="scss" scoped>
.task-display {
  .task-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .task-item {
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-base);
    background: var(--bg-color-light);
  }
  
  .task-header {
    @include flex-between;
    margin-bottom: var(--spacing-xs);
  }
  
  .task-number {
    @include flex-center;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: var(--font-size-small);
    font-weight: 600;
  }
  
  .task-title {
    flex: 1;
    margin: 0 var(--spacing-sm);
    font-weight: 500;
  }
  
  .task-meta {
    @include flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
  
  .no-tasks {
    text-align: center;
    color: var(--text-color-secondary);
    font-style: italic;
  }
}
</style>